<!-- Area -->
<template>
  <el-cascader style="width: 100%;" v-model="value" clearable :options="AreaList" @change="handleChange"></el-cascader>
</template>

<script>
import AreaListObj from './areaList.json'
export default {
  name: 'AreaCom',
  components: {},
  data () {
    return {
      value: [],
      AreaList: []
    }
  },
  props: {
    defalutValue: {
      type: String,
      defalut: ''
    }
  },
  watch: {
    'defalutValue': function (value) {
      this.getValue(value)
    }
  },
  computed: {},
  created () {
    this.mapData()
  },
  mounted () {
    this.getValue(this.defalutValue)
  },
  methods: {
    getValue (value) {
      if (value) {
        this.value = value.split(',')
      } else {
        this.value = []
      }
    },
    mapData () {
      let newArr = []
      for (const x in AreaListObj) {
        const one = AreaListObj[x]
        const itemOne = {
          // value: x,
          value: AreaListObj[x].name,
          label: AreaListObj[x].name,
          children: []
        }
        if (one.child) {
          for (const y in one.child) {
            const two = one.child[y]
            const itemTwo = {
              // value: y,
              value: one.child[y].name,
              label: one.child[y].name,
              children: []
            }
            if (two.child) {
              for (const z in two.child) {
                const itemThree = {
                  // value: z,
                  value: two.child[z],
                  label: two.child[z]
                }
                itemTwo.children.push(itemThree)
              }
            }
            itemOne.children.push(itemTwo)
          }
        }

        newArr.push(itemOne)
      }
      this.AreaList = newArr
    },
    handleChange (value) {
      const areaObj = {
        province: value[0],
        city: value[1],
        region: value[2],
        area: value[0] + value[1] + value[2]
      }
      this.$emit('getArea', areaObj)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
